<template>
	<div class="container">
		<div class="lucky-wheel">
			<div class="wheel-main">
				<div class="wheel-pointer" @click="beginRotate()"></div>
				<div class="wheel-bg" :style="rotateStyle">
					<div class="prize-list">
						<div
							class="prize-item"
							v-for="(item, index) in prizeList"
							:key="index"
							:style="item.style"
						>
							<div class="prize-pic">
								<img :src="item.icon" />
							</div>
							<div class="prize-type">{{ item.name }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="points-box">
			<div class="points">可用积分：{{ count }}</div>
		</div>

		<div class="toast" v-show="prizeShow">
			<div class="toast-title" v-if="result.isPrize">恭喜你</div>
			<div class="toast-title" v-else>很遗憾</div>
			<div class="toast-content">
				<div v-if="result.isPrize">本次抽中奖品为{{ result.name }}</div>
				<div v-else>本次未能中奖，祝您下次好运</div>
				<div>学分消耗1分</div>
			</div>
			<div class="toast-btn-box">
				<div class="toast-btn" @click="closeToast">我知道了</div>
			</div>
		</div>
		<div class="toast-mask" v-show="prizeShow"></div>
	</div>
</template>

<script>
import prizeList from '@/assets/data/prize.js';

export default {
	data() {
		return {
			result: {}, // 抽奖结果
			index: 0,
			prizeShow: false, // 奖品信息
			angleList: [], // 奖品角度
			rotateAngle: 0, // 旋转角度
			isRotating: false, // 是否正在旋转
			count: 3, // 剩余抽奖次数
			prizeList: [], // 奖品列表
			CIRCLE_ANGLE: 360,
			duration: 2000, // 转盘旋转时间
			config: {
				duration: 3000, // 总旋转时间
				circle: 6, // 旋转圈数
				mode: 'ease-in-out',
			},
		};
	},
	mounted() {
		document.title = '抽奖';
		// 获取奖品列表
		this.initPrizeList();
	},
	computed: {
		rotateStyle() {
			return `-webkit-transition: transform ${this.config.duration}ms ${this.config.mode};
                    transition: transform ${this.config.duration}ms ${this.config.mode};
                    -webkit-transform: rotate(${this.rotateAngle}deg);
                    transform: rotate(${this.rotateAngle}deg);`;
		},
	},
	methods: {
		initPrizeList() {
			// 接口获取列表
			this.prizeList = this.formatPrizeList(prizeList);
		},
		// 格式化奖品列表，计算每个奖品的位置
		formatPrizeList(list) {
			// 记录每个奖的位置
			const angleList = [];
			const len = list.length;
			// 计算单个奖项所占的角度
			const average = this.CIRCLE_ANGLE / len;
			const half = average / 2;
			// 循环计算给每个奖项添加style属性
			list.forEach((item, i) => {
				// 每个奖项旋转的位置为 当前 i * 平均值 + 平均值 / 2
				const angle = -(i * average + half);
				item.style = `-webkit-transform: rotate(${angle}deg);transform: rotate(${angle}deg);`;
				// 记录每个奖项的角度范围
				angleList.push(i * average + half);
			});
			this.angleList = angleList;
			return list;
		},
		beginRotate() {
			// 添加次数校验
			if (this.count < 1) {
				window.alert('当前学分不足，请先获取学分');
				return;
			}
			if (this.isRotating) return;
			this.lottery();
		},
		random(max, min = 0) {
			return parseInt(Math.random() * (max - min + 1) + min);
		},
		// 抽奖
		lottery() {
			// 抽奖接口

			// 随机获取下标
			this.index = this.random(this.prizeList.length - 1);
			// 减少剩余抽奖次数
			this.count--;
			// 开始旋转
			this.rotating();
		},
		rotating() {
			this.isRotating = true;
			// 计算角度 = 初始角度+多旋转的圈数+奖项的角度
			this.rotateAngle =this.rotateAngle +this.config.circle * this.CIRCLE_ANGLE +this.angleList[this.index] -(this.rotateAngle % this.CIRCLE_ANGLE);

			// 旋转结束后，允许再次触发
			setTimeout(() => {
				this.rotateOver();
			}, this.config.duration + 500);
		},
		rotateOver() {
			this.result = prizeList[this.index];
			this.isRotating = false;
			this.prizeShow = true;
		},
		//关闭弹窗
		closeToast() {
			this.prizeShow = false;
		},
	},
};
</script>
<style lang="scss" scoped>
.container {
	position: absolute;
	width: 100%;
	background-image: url('~@/assets/images/lottery1.png');
	background-size: 100%;
	background-repeat: no-repeat;
}
/* 转盘 */
.lucky-wheel {
	width: 100%;
	padding-top: 240px;
}
.wheel-main {
	position: relative;
	width: 295px;
	height: 295px;
	margin: 0 auto;
}
.wheel-bg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background: url('~@/assets/images/lottery2.png') no-repeat center top;
	background-size: 100%;
	color: #fff;
}
.wheel-pointer {
	position: absolute;
	top: 49%;
	left: 50%;
	z-index: 2;
	width: 85px;
	height: 85px;
	background: url('~@/assets/images/lottery3.png') no-repeat center top;
	background-size: contain;
	transform: translate(-50%, -50%);
}
.wheel-bg div {
	text-align: center;
}
.prize-list {
	width: 100%;
	height: 100%;
	position: relative;
}
.prize-list .prize-item {
	position: absolute;
	width: 95px;
	height: 150px;
	top: 0;
	left: 50%;
	margin-left: -47.5px;
	transform-origin: 50% 100%;
}
.prize-pic img {
	width: 64px;
	height: 40px;
	margin-top: 20px;
}
.prize-type {
	font-size: 12px;
}

/* 积分 */
.points-box {
	padding: 25px 0 30px;
	text-align: center;
}
.points {
	display: inline-block;
	padding: 8px 36px;
	font-size: 18px;
	color: #e2bc9a;
	border: 2px solid #e2bc9a;
	border-radius: 23px;
}
/* toast */
.toast-mask {
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 10000;
	width: 100%;
	height: 100%;
}
.toast {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 20000;
	transform: translate(-50%, -50%);
	width: 270px;
	height: 180px;
	background: #fff;
	border-radius: 14px;
}

.toast-title {
	padding: 32px 0 10px 0;
	font-size: 18px;
	color: #141419;
	text-align: center;
}
.toast-content {
	font-size: 14px;
	color: #666;
	line-height: 24px;
	text-align: center;
}
.toast-btn-box {
	padding-top: 10px;
	text-align: center;
}
.toast-btn {
	display: inline-block;
	padding: 6px 34px;
	font-size: 16px;
	color: #fff;
	line-height: 16px;
	font-weight: 600;
	background: #862820;
	border-radius: 14px;
}
</style>
